<template>
	<view class="">
		<view class="main-wrap" :class="{ show: loaded }">
			<view class="top-bg"></view>
			<view class="image-con"><image :src="pic" mode="" class="image_12"></image></view>
			<view class="" style="padding: 25rpx;">
				<view class="card">
					<view class="title">充值金额</view>
					<view class="item_box flex-row" style="flex-wrap: wrap;">
						<view class="item flex-col items-center justify-center" :key="k" v-for="(item, k) in dataList" @click="change(item, k)" :class="{ active: current == k }">
							<view class="x1">{{ item.price }}元</view>
							<view class="x2" v-if="item.send!=0">赠送{{ item.send }}</view>
						</view>
						<view class="item flex-col items-center justify-center"
						:class="{ active: current == 10086 }" @click="change('isPrice',10086)">
							<view class="x1">
								<input 
								@blur="isTextInput = '自定义金额'"
								@focus="isTextInput = ''"
								type="number" 
								v-model="isPrice" 
								placeholder-style="color:#000" 
								style="text-align: center;" 
								:placeholder="isTextInput">
							</view>
						</view>
					</view>
				</view>
				<view class="card">
					<view class="title">支付方式</view>
					<view class="btn-circle btn-1 flex-row items-center justify-between">
						<view class="flex-row items-center">
							<image src="/static/img/wexin.png" mode="" style="width:46rpx;height:46rpx;"></image>
							<text style="padding-left: 30rpx;">微信支付</text>
						</view>
						<u-icon name="checkmark-circle-fill" size="36" color="#429EFE" :customStyle="{}"></u-icon>
					</view>
				</view>
				<view class="btn-fill btn" @click="submit">立即充值</view>
				
				<view class="flex-row items-center justify-center xieyi" @click="navTo('/pages/public/fuwenben?type=4&name=充值协议')">
					<u-icon name="checkmark-circle" size="30" color="#999" :customStyle="{}"></u-icon>
					<text style="color: #999999;margin-lef:10rpx;">已阅读并同意</text>
					<text>《xxx充电充值协议》</text>
				</view>
			</view>
		</view>
		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentActive: {},
			current: 0,
			pic: '',
			dataList: [],
			isTextInput: '自定义金额',
			isPrice: '',
			loaded: false,
			isLoading: false
		}
	},
	onLoad() {
		this.getSysPic();
		this.loadData();
	},
	methods: {
		change(item, index) {
			this.current = index;
			if(item == 'isPrice') return
			this.currentActive = item;
		},
		async getSysPic() {
			const res = await this.$request('content/pic', {type:2});
			if (res.result == 0) {
				this.pic = res.data.pic;
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		async loadData() {
			const res = await this.$request('user/recharge-list', {}, { showLoading: true });
			if (res.result == 0) {
				this.dataList = res.dataList;
				if (res.dataList.length != 0) this.currentActive = res.dataList[0];
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		async submit() {
			if (!uni.getStorageSync('uid')) {
				// #ifdef APP-PLUS
				this.navTo('/pages/login/login');
				// #endif
				// #ifndef APP-PLUS
				this.navTo('/pages/public/login');
				// #endif
				return;
			}
			var payType = '0'
			// #ifdef APP-PLUS
			payType = '2'
			// #endif
			
			var data = {}
			if(this.current == 10086){
				data = {
					uid: uni.getStorageSync('uid'),
					money: this.isPrice,
					send: '',
					price: this.isPrice,
					payType
				}
			}else{
				data = {
					uid: uni.getStorageSync('uid'),
					money: this.currentActive.price,
					send: this.currentActive.send,
					price: this.currentActive.price,
					payType
				}
			}
			
			const res = await this.$request('user/pay', data, { showLoading: true });
			if (res.result == 0) {
				if (res.data.body) this.PaySingData(res.data.body);
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		PaySingData(data) {
			let _this=this;
			var form = {
				timeStamp: data.timestamp,
				nonceStr: data.noncestr,
				package: `prepay_id=${data.prepayid}`,
				signType: data.signType,
				paySign: data.sign,
			}
			// #ifdef APP-PLUS
			form = {
				orderInfo: data
			}
			// #endif
			uni.requestPayment({
				...form,
				success(res) {
					_this.$util.msg('充值成功!')
				},
				fail(res) {
		           
				}
			});
		}
	}
};
</script>
<style>
page {
	background: #F5F5F5;
}
</style>
<style scoped lang="scss">
.card{
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
}
.image_12 {
	width: 706rpx;
	height: 225rpx;
	border-radius: 20rpx;
}
.image-con {
	position: absolute;
	top: 50rpx;
	left: 20rpx;
}
.top-bg {
	width: 750rpx;
	height: 160rpx;
	background: $uni-color-bg;
	position: relative;
	margin-bottom: 100rpx;
}
.active {
	background: #429efe !important;
	.x1,
	.x2 {
		color: #ffffff;
	}
}
.title {
	line-height: 90rpx;
	font-size: 28rpx;
	color: #333333;
}
.item {
	width: 190rpx;
	height: 139rpx;
	background: #f6f6f6;
	border-radius: 10rpx;
	margin-bottom: 20rpx;
	margin-right: 30rpx;
}
.item:nth-child(3n) {
	margin-right: 0;
}
.x1 {
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #333333;
}

.x2 {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #666666;
}
.btn-circle {
	border: 1rpx solid #e7e7e7;
	padding: 0 44rpx;
}
.btn-fill {
	background: $uni-color-bg;
	font-size: 30rpx;
	color: #ffffff;
	margin: 30rpx auto;
}
.btn-1{
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	border-radius: 44rpx;
}
.btn {
	width: 640rpx;
	height: 110rpx;
	line-height: 110rpx;
	text-align: center;
	border-radius: 55rpx;
}
.xieyi {
	font-size: 22rpx;
}
</style>
